<template>
    <h2 style="text-align: center;">角色列表</h2>
    <!-- 查询表单部分 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="角色名称">
            <el-input v-model="formInline.Rname" placeholder="请输入角色名称" clearable />
        </el-form-item>
        
        <el-form-item label="角色状态">
            <el-select v-model="formInline.Rstate" >
                <el-option label="请选择角色状态" value="" />
                <el-option label="启用" :value="true" />
                <el-option label="禁用" :value="false" />
            </el-select>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
             <el-button type="primary" @click="ShowPermissionInfo">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 数据显示部分 -->
    <el-table :data="Info" border style="width: 100%">
        <el-table-column prop="Role_Id" label="角色编号" width="180" align="center"/>
        <el-table-column prop="Role_Name" label="角色名称" width="180" align="center"/>
        <el-table-column prop="Role_State" label="角色状态" width="180" align="center">
            <template v-slot="setup">
                <el-tag v-if="setup.row.Role_State==true" type="success">启用</el-tag>
                <el-tag v-else type="error">禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="Permission_Name" label="角色权限" width="400" align="center">
            <template v-slot="setup">
                <span v-if="setup.row.Permission_Name==''">无</span>
                <span v-else>{{ setup.row.Permission_Name }}</span>
            </template>
        </el-table-column>
        <el-table-column  label="操作" align="center">
            <template v-slot="setup">
                <el-button type="primary" @click="UpdPermission(setup.row.Role_Id)" style="margin-right: 10px;">修改</el-button>
                <el-button type="danger" @click="DelRole(setup.row.Role_Id)" style="margin-right: 10px;">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页部分 -->
    <div class="demo-pagination-block">
        <el-pagination
        v-model:current-page="PageInfo.index"
        v-model:page-size="PageInfo.size"
        :page-sizes="[2,3,4]"
        :size="PageInfo.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper" 
        :total="PageInfo.zongtiao"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
  
<script lang="ts" setup>
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';
    import { ElMessage, ElMessageBox } from 'element-plus'
    const router=useRouter();

    //显示响应式数据
    const Info = ref([])
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:2,
        zongtiao:0,
        zongpage:0
    })
    const background = ref(true)
    const disabled = ref(false)
    //修改页容量
    const handleSizeChange = (val: number) => {
        PageInfo.value.size=val;
        ShowPermissionInfo();
    }
    //跳转页
    const handleCurrentChange = (val: number) => {
        PageInfo.value.index=val;
        ShowPermissionInfo();
    }
    onMounted(()=>{
        ShowPermissionInfo();//显示角色
    })
    //查询条件
    const formInline = ref({
        Rname: '',
        Rstate: '',
    })
    //显示角色
    const ShowPermissionInfo=()=>{
        axios.get("https://localhost:44377/api/User/ShowPermissionInfo",
            {
                params:{
                    Rname:formInline.value.Rname,
                    Rstate:formInline.value.Rstate,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
             Info.value=res.data.Data.Plist;
             PageInfo.value.zongpage=res.data.Data.ZongPage;
             PageInfo.value.zongtiao=res.data.Data.ZongTiao;
        })
    }
    //修改
    const UpdPermission=(Role_Id:number)=>{
        router.push({
            name:"UpdPermission",
            params:{
                id:Role_Id,
            }
        })
    }
    //逻辑删除
    const DelRole=(Role_Id:number)=>{
        ElMessageBox.confirm(
            '确定删除？',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        )
        .then(() => {
            axios.delete("https://localhost:44377/api/User/DelRole?id="+Role_Id)
            .then(res=>{
                if(res.data.Data>0)
                {
                    ElMessage.success('删除成功');
                    ShowPermissionInfo();
                }
                else
                {
                    ElMessage.error('删除失败');
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
    }
</script>


<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }
    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>


<style scoped>
    .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
    margin-bottom: 16px;
    }
</style>
  